前言

相信很多人都會看到在滑動網站時，滑到一個地方就會出現動畫，滑回去再滑回來又會再出現一次，
那這到底是怎麼做的呢 ?? 於是我就找到一個不用寫JavaScript或JQuery也能達成的插件 AOS.js
先給大家看一下範例網站 --> https://michalsnik.github.io/aos/

前置作業

程式碼中加入下方這段即可

<script>
  AOS.init();
</script>

fade

當網頁捲動到這個元素時，產生動畫的效果有很多種，那我先提出幾種，其他想知道的去官往查囉

<div data-aos="fade-up"></div> --> Div往上 fade in
<div data-aos="fade-down"></div> --> Div往下 fade in
<div data-aos="fade-left"></div> --> Div往左 fade in
<div data-aos="fade-up-left"></div> --> Div往右 fade in

翻轉

<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>
<div data-aos="flip-left"></div>

Zoom in zoom out

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>

動畫基本設定

data-aos-duration="3000" // 動畫的持續時間，default is 400ms
data-aos-easing="linear" // 動畫的速度曲線，default is ease
data-aos-offset="300" // 調整本來觸發點的offset(in px)，default is 120
data-aos-delay="300" // 動畫的延遲啟動時間，default is 0

動畫在視窗的哪個位置會被啟動

data-aos-anchor-placement="top-bottom" 
data-aos-anchor-placement="center-bottom"
data-aos-anchor-placement="bottom-bottom"

”top-bottom” 指的是「該元素的頂端」在瀏覽器的下方，啟動動畫
”center-bottom” 指的是「該元素的中間」在瀏覽器的下方時，啟動動畫
”bottom-bottom” 指的是「該元素的底部」在瀏覽器的下方時，啟動動畫
也可以是 “top-center” “center-center” “bottom-center”
以此類推....

這樣就不用自己寫 JavaScript 或 JQuery 也能完成我們的動畫啦
那我們鐵人賽Day29見囉!!